import React,{useEffect} from 'react'
import { Outlet,useLocation, useNavigate,useMatches } from 'react-router-dom'
import {routes} from '@/router/router'

interface Props {
    children?: React.ReactNode
    handleClick?: (e:React.MouseEvent<HTMLButtonElement, MouseEvent>)=>void //限定只能加载button 上点击事件
    handleInput?: (e:React.ChangeEvent<HTMLInputElement>)=>void //限定只能加载input 输入事件
    handleDiv?: (e:React.MouseEvent<HTMLDivElement>)=>void //限定只能加载Ddiv提交事件
}

function Welcome(props:Props){
  const {children, handleClick, handleInput, handleDiv} = props

    return(
        <>
            {children}
            <div>
              <button onClick={handleClick}>Click me button</button>
              <div onClick={handleDiv}>Click me div</div>
              <input  onChange={handleInput} />
            </div>
        </>
    )
}

export default function childrenEvent() {
  const [value,setValue] = React.useState('')

  const location = useLocation()
  const navigate = useNavigate()
  console.log(location,navigate('/'))
  return (
    <div>
      children 与Event 的使用和类型限制
      <Welcome handleClick={(e)=>console.log(e)} handleInput={(value)=>setValue(value.target.value)} handleDiv={(e)=>console.log(e)}>
        <h1>Welcome to React {value}</h1>
      </Welcome>
      <Outlet/>
    </div>
  )
}
